import React, { PropsWithChildren } from 'react';
import { connect } from 'react-redux';
import { Link,RouteComponentProps } from 'react-router-dom';
import { CombinedState } from '@/store/reducers';
import NavHeader from '@/components/NavHeader'
import { Form, Input, Button, message } from "antd";
// import actions from '@/store/actions/home';
import { ProfileState } from '@/store/reducers/profile';
import actions from '@/store/actions/profile'
import { UserAddOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import './index.less'
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;
interface Params {}
type Props = RouteComponentProps<Params> & StateProps & DispatchProps;

function Register(props: Props) {
    const onFinish = (value: any) => {
        console.log(value)
        props.register(value);
    }
    const onFinishFailed = (errorInfo: any) => {
        console.log(errorInfo);
        message.error("表单验证失败! ");
    }
    return (
        <>
            <NavHeader history={props.history}>用户注册</NavHeader>
            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                className="login-form"
            >
                <Form.Item
                    name="username"
                    label="用户名"
                    rules={[
                        {
                            required: true,
                            message: "请输入你的密码!"
                        },
                    ]}
                >
                    <Input prefix={<UserAddOutlined/>}  type="username"
                        placeholder="请输入用户名" />

                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: "请输入你的密码!" }]}
                >
                    <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
                </Form.Item>
                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{ required: true, message: "请输入你的确认密码!" }]}
                >
                    <Input
                        prefix={<LockOutlined />}
                        type="password"
                        placeholder="确认密码"
                    />
                </Form.Item>
                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[{ required: true, message: "请输入你的邮箱!" }]}
                >
                    <Input prefix={<MailOutlined />} type="email" placeholder="邮箱" />
                </Form.Item>
                <Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        className="login-form-button"
                    >
                        注册
          </Button>
          或者 <Link to="/login">立刻登录!</Link>
                </Form.Item>
            </Form>
        </>
    )
}
let mapStateToProps = (state: CombinedState): ProfileState => state.profile;

export default connect(
    mapStateToProps,
    actions
)(Register);